<template>
    <div class="lesson-box">
        <div class="section-box" v-if="basicVisable">
            <div class="outline-box">
                <div class="class-title add-point">
                    <div class="leftdiv">
                        <div class="left"></div>
                        <div class="right">课程简介</div>
                    </div>
                    <div class="right">
                        <div class="add-btn" @click="addChapter">添加章</div>
                    </div>
                </div>
                <el-scrollbar height="800px">
                    <div v-for="(value,index) in list" :key="index" class="chapter-list">
                        <el-collapse v-model="activeName" accordion  @change="openOutline(index)">
                            <el-collapse-item>
                                <template #title>
                                    <div class="outline-title chapter">
                                        <div class="chapter-left">
                                            <el-icon v-if="!iconActive[index]"><CaretRight /></el-icon>
                                            <el-icon v-if="iconActive[index]"><CaretBottom /></el-icon>
                                            <div class="chapter-icon">章</div>
                                            <div class="chapter-title">第一章  产品结构设计基础{{ value }}</div>
                                        </div>
                                    </div>
                                </template>
                                <el-collapse v-model="innerActiveNames" accordion>
                                    <el-collapse-item name="inner-1">
                                        <template #title>
                                            <div class="outline-title section">
                                                <div class="chapter-left">
                                                    <div class="chapter-icon">节</div>
                                                    <div class="chapter-title">第一节  产品结构设计基础</div>
                                                </div>
                                            </div>
                                        </template>
                                        <div class="outline-title point">
                                            <div class="chapter-left">
                                                <div class="chapter-icon">知识点</div>
                                                <div class="chapter-title">产品结构设计基础</div>
                                            </div>
                                            <div class="chapter-right">
                                                <el-button class="xiti" @click="addQuestion">
                                                    <span>习题</span>
                                                </el-button>
                                                <el-button class="ziliao" @click="addZiliao">
                                                    <span>资料</span>
                                                </el-button>
                                            </div>
                                        </div>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </el-scrollbar>
            </div>
            <div class="right-box">
                <div class="ziliao-box">
                    <div class="class-title">
                        <div class="left"></div>
                        <div class="right">相关资料</div>
                    </div>
                    <div class="list-box">
                        <div class="left">
                            <div class="tages">已发布</div>
                            <div class="list-title">产品结构设计基础.pdf</div>
                        </div>
                        <div class="right">
                            <el-button class="edit" @click="pdfShow = true">
                                <img src="@/assets/show.png" alt="">
                                <span>预览资源</span>
                            </el-button>
                        </div>
                    </div>
                    <div class="list-box">
                        <div class="left">
                            <div class="tages wei">已发布</div>
                            <div class="list-title">产品结构设计基础.pdf</div>
                        </div>
                        <div class="right">
                            <el-button class="edit" @click="pdfShow = true">
                                <img src="@/assets/show.png" alt="">
                                <span>预览资源</span>
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="xiti-box">
                    <div class="class-title">
                        <div class="left"></div>
                        <div class="right">相关习题</div>
                    </div>
                    <div class="list-box">
                        <div class="left">
                            <div class="tages">已发布</div>
                            <div class="list-title">产品结构设计基础</div>
                        </div>
                        <div class="right">
                            <el-button class="edit" @click="questionShow=true">
                                <img src="@/assets/show.png" alt="">
                                <span>查看习题</span>
                            </el-button>
                        </div>
                    </div>
                    <div class="list-box">
                        <div class="left">
                            <div class="tages wei">已发布</div>
                            <div class="list-title">产品结构设计基础</div>
                        </div>
                        <div class="right">
                            <el-button class="edit" @click="questionShow=true">
                                <img src="@/assets/show.png" alt="">
                                <span>查看习题</span>
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="material-management" v-if="resourse">
            <div class="nav-path">
                <div class="titles">
                    <div class="left"></div>
                    <div class="right">
                        <span>章: 章内容占位</span> | 
                        <span>节: 节内容占位</span> | 
                        <span>知识点: 知识点内容占位</span>
                    </div>
                </div>
                <button class="btn btn-default" @click="back">返回</button>
            </div>
            <div class="search-box">
                <el-input v-model="input" placeholder="请输入题干信息" />
                <el-input v-model="input" placeholder="请输入习题编号" />
                <el-select v-model="value" class="m-2" placeholder="请选择习题类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="value" class="m-2" placeholder="请选择难易程度">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="btns">
                    <el-button> <el-icon><RefreshLeft /></el-icon>重置 </el-button>
                    <el-button> <el-icon><Search /></el-icon>查询 </el-button>
                </div>
            </div>
            <div class="question-box">
                <div class="action-buttons">
                    <div class="left-buttons">
                        <button class="btn btn-primary">
                            <img src="@/assets/add-point.png" alt="">
                            <span>资源库添加资料</span>
                        </button>
                        <button class="btn btn-primary">
                            <img src="@/assets/add-point.png" alt="">
                            <span>手动添加资料</span>
                        </button>
                    </div>
                    <div class="right-buttons">
                        <button class="btn btn-danger" @click="batchDelete">批量删除</button>
                    </div>
                </div>
                <div class="table-container">
                    <el-table ref="multipleTableRef" :data="materials" style="width: 100%" @selection-change="handleSelectionChange" >
                        <el-table-column type="selection" />
                        <el-table-column label="资料">
                            <template #default="scope">{{ scope.row.name }}</template>
                        </el-table-column>
                        <el-table-column property="name" label="操作" align="right">
                            <template #default="scope">
                                <div class="material-operations">
                                    <button class="operation-btn operation-preview" @click="previewMaterial(scope.row)">预览</button>
                                    <button class="operation-btn operation-delete" @click="deleteMaterial(scope.row)">删除</button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="material-management" v-if="questionVisable">
            <div class="nav-path">
                <div class="titles">
                    <div class="left"></div>
                    <div class="right">
                        <span>章: 章内容占位</span> | 
                        <span>节: 节内容占位</span> | 
                        <span>知识点: 知识点内容占位</span>
                    </div>
                </div>
                <button class="btn btn-default" @click="questionBack">返回</button>
            </div>
            <div class="search-box">
                <el-input v-model="input" placeholder="请输入题干信息" />
                <el-input v-model="input" placeholder="请输入习题编号" />
                <el-select v-model="value" class="m-2" placeholder="请选择习题类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="value" class="m-2" placeholder="请选择难易程度">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="btns">
                    <el-button> <el-icon><RefreshLeft /></el-icon>重置 </el-button>
                    <el-button> <el-icon><Search /></el-icon>查询 </el-button>
                </div>
            </div>
            <div class="question-box">
                <div class="action-buttons">
                    <div class="left-buttons">
                        <button class="btn btn-primary">
                            <img src="@/assets/add-point.png" alt="">
                            <span>习题库添加</span>
                        </button>
                        <button class="btn btn-primary">
                            <img src="@/assets/add-point.png" alt="">
                            <span>手动创建习题</span>
                        </button>
                    </div>
                    <div class="right-buttons">
                        <button class="btn btn-danger" @click="questionDelete">批量删除</button>
                    </div>
                </div>
                <div class="table-container">
                    <el-table ref="multipleTableRef" :data="questionList" style="width: 100%" @selection-change="handleQuestionSelectionChange" >
                        <el-table-column type="selection" />
                        <el-table-column label="题干信息">
                            <template #default="scope">{{ scope.row.text }}</template>
                        </el-table-column>
                        <el-table-column label="习题编号">
                            <template #default="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column label="习题类型">
                            <template #default="scope">{{ scope.row.type }}</template>
                        </el-table-column>
                        <el-table-column label="难易度">
                            <template #default="scope">{{ scope.row.difficulty }}</template>
                        </el-table-column>
                        <el-table-column label="上传人">
                            <template #default="scope">{{ scope.row.uploader }}</template>
                        </el-table-column>
                        <el-table-column property="name" label="操作" align="right">
                            <template #default="scope">
                                <div class="material-operations">
                                    <button class="operation-btn operation-preview" @click="previewQues(scope.row)">预览</button>
                                    <button class="operation-btn operation-delete" @click="deleteQues(scope.row)">删除</button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <el-dialog v-model="pdfShow" width="50%" height="600px" top="15vh">
            <template #header>
                <div class="headers">
                    <span>PDF文件预览</span>
                </div>
            </template>
            <div class="dialog-content">
                <div class="toolbar">
                    <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
                    <span> {{ currentPage }} / {{ totalPages }} </span>
                    <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
                </div>
                <div class="pdf-view" v-if="pdfReady">
                    <VuePdfEmbed :source="pdfSource" :page="currentPage" :scale="scaleNumber" @rendered="onPageRendered" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pdfShow = false"> 取消 </el-button>
                    <el-button type="primary" @click="pdfShow = false"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="questionShow" width="50%" height="600px" top="15vh">
            <template #header>
                <div class="headers">
                    <span>习题预览</span>
                </div>
            </template>
            <div class="exercise-preview">
                <div class="knowledge-point">
                    <span class="knowledge-label">所属知识点：</span>
                    {{ questionData.knowledgePoint }}
                </div>
                
                <div class="question-container">
                    <div class="question-header">
                        <div class="question-type">{{ questionData.type }}</div>
                        <div class="question-text">{{ questionData.text }}</div>
                    </div>
                    <div class="options-list">
                    <div v-for="(option, index) in questionData.options" :key="index" class="option-item" :class="{ selected: optionSele == index }" @click="optionSelect(index)">
                        <div class="left">
                            <span class="option-letter">{{ option.letter }}</span>
                            <span class="option-text">{{ option.text }}</span>
                        </div>
                        <span class="radio-button"></span>
                    </div>
                    </div>
                </div>
                
                <div class="answer-section">
                    <div class="correct-answer">正确答案：{{ questionData.correctAnswer }}</div>
                    <div class="analysis-text">{{ questionData.analysis }}</div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="questionShow = false"> 取消 </el-button>
                    <el-button type="primary" @click="questionShow = false"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="addChapterVisable" width="50%">
            <template #header>
                <div class="headers">
                    <span>添加章节</span>
                </div>
            </template>
            <div class="exercise-preview">
                <div class="add-form">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">章名称</div>
                            <div class="reds">*</div>
                        </div>
                        <el-input v-model="input" placeholder="请输入章名称" />
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">教学方式</div>
                            <div class="reds">*</div>
                        </div>
                         <el-select v-model="value" placeholder="请选择教学方式">
                            <el-option label="实践法" value="实践法" />
                            <el-option label="实践法" value="实践法" />
                            <el-option label="实践法" value="实践法" />
                            <el-option label="实践法" value="实践法" />
                        </el-select>
                    </div>
                </div>
                <div class="add-form">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">对应课程目标</div>
                            <div class="reds">*</div>
                        </div>
                         <el-select v-model="value" placeholder="请选择对应课程目标">
                            <el-option label="对应课程目标" value="对应课程目标" />
                            <el-option label="对应课程目标" value="对应课程目标" />
                            <el-option label="对应课程目标" value="对应课程目标" />
                            <el-option label="对应课程目标" value="对应课程目标" />
                        </el-select>
                    </div>
                    <div class="form-item">
                        <div class="items">
                            <div class="text">学时</div>
                            <div class="reds">*</div>
                        </div>
                        <el-input-number v-model="xueshi" :min="1" :max="100" />
                        <div class="tips">剩余未分配学时 35</div>
                    </div>
                </div>
                <div class="add-form">
                    <div class="form-item">
                        <div class="items">
                            <div class="text">章描述</div>
                        </div>
                         <el-input v-model="textarea" :rows="5" type="textarea" placeholder="请完善章描述" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addChapterVisable = false"> 取消 </el-button>
                    <el-button type="primary" @click="addChapterVisable = false"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import { CaretRight,CaretBottom,RefreshLeft,Search } from '@element-plus/icons-vue'
    import VuePdfEmbed from 'vue-pdf-embed'
    import { ElMessage,ElMessageBox } from 'element-plus'

    const activeName = ref('1')
    const innerActiveNames = ref([]);
    const list  = ref([0,1,2,3,4,5,0,1,2,3,4,5,0]);
    const pdfSource = ref('https://www.gov.cn/zhengce/pdfFile/2023_PDF.pdf')
    const iconActive = ref(Array(list.value.length).fill(false))
    
    const currentPage = ref(1);
    const totalPages = ref(0);
    const xueshi = ref(0);
    const scaleNumber = ref(0.5);
    const pdfShow = ref(false);
    const questionShow = ref(false);
    const pdfReady = ref(false);
    const optionSele = ref(0);
    const resourse   = ref(false);
    const questionVisable = ref(false);
    const basicVisable = ref(true);
    const addChapterVisable = ref(false);
    const multipleSelection = ref([]);
    const questionSelection = ref([]);
    
    const questionData = ref({
        knowledgePoint: '知识点内容占位',
        type: '单选',
        text: '题目文本内容占位',
        options: [
            { letter: 'A', text: '答案一', selected: false },
            { letter: 'B', text: '答案二', selected: true },
            { letter: 'C', text: '答案三', selected: false },
            { letter: 'D', text: '答案四', selected: false }
        ],
        correctAnswer: 'B',
        analysis: '解析内容占位',
        uploader: '张老师'
    });
    const questionList = ref([
        {
            id:'Q01',
            knowledgePoint: '知识点内容占位',
            type: '单选',
            text: '题目文本内容占位',
            options: [
                { letter: 'A', text: '答案一', selected: false },
                { letter: 'B', text: '答案二', selected: true },
                { letter: 'C', text: '答案三', selected: false },
                { letter: 'D', text: '答案四', selected: false }
            ],
            correctAnswer: 'B',
            analysis: '解析内容占位',
            difficulty: '中等',
        }
    ]);
    const materials = ref([
        { id: 1, name: '第一章 产品结构设计基础.pdf', type: 'pdf', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false },
        { id: 2, name: '第一章 产品结构设计基础.mp4', type: 'mp4', selected: false }
    ]);

    const openOutline = (index) => {
        for( var i=0;i<iconActive.value.length;i++ ){
            if( i!=index ){
                iconActive.value[i] = false
            } else {
                iconActive.value[i] = true
            }
        }
    }

    const onPageRendered = (e) => {
        console.log(e)
        totalPages.value = e.doc.numPages;
    };

    // 翻页功能
    const prevPage = () => {
        if (currentPage.value > 1) currentPage.value--;
    };
    const nextPage = () => {
        if (currentPage.value < totalPages.value) currentPage.value++;
    };
    const optionSelect = (e) => {
        optionSele.value = e
    };
    // 删除资料
    const deleteMaterial = (material) => {
        ElMessageBox.confirm( '确定要删除'+material.name+'吗？', '确认删除？', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', } ) .then(() => {
            ElMessage({ type: 'success', message: 'Delete completed', })
            const index = materials.value.findIndex(item => item.id === material.id);
            if (index !== -1) {
                materials.value.splice(index, 1);
            }
        }) .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
    };
    const handleSelectionChange = (val) => {
        multipleSelection.value = val
    }
    const handleQuestionSelectionChange = (val) => {
        questionSelection.value = val
    }
    const back = () => {
        resourse.value = !resourse.value
        basicVisable.value = true
    }
    const batchDelete = () => {
        if( multipleSelection.value.length == 0 ){
            ElMessage({ type: 'error', message: '未选择数据', })
            return;
        }
        ElMessageBox.confirm( '确定要删除这'+multipleSelection.value.length+'项数据吗？', '确认删除？', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', } ) .then(() => {
            ElMessage({ type: 'success', message: 'Delete completed', })
        }) .catch(() => {
            ElMessage({ type: 'info', message: 'Delete canceled', })
        })
    };
    const questionDelete = () => {
        if( questionSelection.value.length == 0 ){
            ElMessage({ type: 'error', message: '未选择数据', })
            return;
        }
        ElMessageBox.confirm( '确定要删除这'+questionSelection.value.length+'项数据吗？', '确认删除？', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', } ) .then(() => {
            ElMessage({ type: 'success', message: 'Delete completed', })
        }) .catch(() => {
            ElMessage({ type: 'info', message: 'Delete canceled', })
        })
    };
    
    const addQuestion = () => {
        basicVisable.value = false
        questionVisable.value = !questionVisable.value
    }
    const addZiliao = () => {
        basicVisable.value = false
        resourse.value = !resourse.value
    }
    const questionBack = () => {
        basicVisable.value = true
        questionVisable.value = !questionVisable.value
    }
    const previewQues = () => {
        questionShow.value = !questionShow.value
    }
    const addChapter = () => {
        addChapterVisable.value = !addChapterVisable.value
    }
    const deleteQues = () => {
        ElMessageBox.confirm( '确定要删除吗？', '确认删除？', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning', } ) .then(() => {
            ElMessage({ type: 'success', message: 'Delete completed', })
        }) .catch(() => {
            ElMessage({ type: 'info', message: 'Delete canceled', })
        })
    }
</script>
<style scoped>
    :deep(.el-collapse-item__arrow){display: none;}
    :deep(.list-box .el-button){border: 1px solid #1465E1;color: #1465E1;}
    .lesson-box{width: 100%;}
    .section-box{display: flex;flex-direction: row;justify-content: center;gap: 20px;background: #fff;padding-bottom: 20px;}
    .outline-box{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);width: 48%;margin-top: 30px;border-radius: 8px;min-height: 800px;padding-bottom: 30px;}
    .outline-box{width: 50%;}
    .outline-title{display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
    .chapter{padding: 0 20px 0 20px;}
    .chapter-list{width: 96%;margin: 0 auto;}
    .outline-title .chapter-left{display: flex;flex-direction: row;align-items: center;}
    .outline-title .chapter-icon{width: 25px;height: 25px;border-radius: 20px;background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%);color: #fff;text-align: center;line-height: 25px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;margin-left: 5px;}
    .outline-title .chapter-title{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;}
    .section{padding: 10px 20px 10px 50px;background-color: #ffffff!important;}
    .point{padding: 20px 20px 10px 100px;background-color: #F3F7FE;}
    .point .chapter-icon{width: 50px!important;background: linear-gradient( 135deg, #2E7CF4 0%, #0457D5 100%)!important;}
    .point .chapter-icon.orange{background: linear-gradient( 135deg, #D4A51D 0%, #D4721D 100%)!important;}
    .chapter-list:nth-of-type(odd) :deep(.el-collapse-item__header) .outline-title { background-color: #F3F7FE; }
    .chapter-list:nth-of-type(even) :deep(.el-collapse-item__header) .outline-title { background-color: #ffffff; }
    .chapter-list:nth-of-type(even) .section{background-color: #F3F7FE!important;}
    .chapter-list:nth-of-type(even) .point{background-color: #fff!important;}
    .xiti{background: rgba(56,105,231,0.2);border: 1px solid #3869E7;color: #0B37AA;}
    .ziliao{background: rgba(90,202,69,0.2);border: 1px solid #5ACA45;color: #217F10;}
    .class-title{display: flex;flex-direction: row;align-items: center;padding: 20px 0 10px 10px; }
    .class-title .left{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .class-title .right{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;font-weight: 600;}
    .right-box{width: 48%;margin-top: 30px;}
    .ziliao-box,.xiti-box{border: 1px solid #D9D9DF;min-height: 160px;width: 96%;margin: 0 auto;border-radius: 8px;}
    .list-box{display: flex;flex-direction: row;justify-content: space-between;padding: 0px 0 0 20px;margin-top: 10px}
    .list-box:first-child{margin-top: 0!important;}
    .list-box .left{display: flex;flex-direction: row;justify-content: space-around;align-items: center;}
    .list-box .left .tages{background: #5ACA45;border-radius: 12px;width: 50px;height: 25px;color: #fff;text-align: center;line-height: 25px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .list-box .left .tages.wei{background: #D4A51D;}
    .list-box .left .list-title{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;font-weight: 400;margin-left: 10px;}
    .list-box .right{padding: 0 20px 0 0;}
    .list-box .right img{width: 15px;height: 15px;}
    .list-box .right span{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;margin-left: 5px;}
    .xiti-box{margin-top: 20px;}
    .toolbar { padding: 12px; background: #f5f5f5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    button, select, input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
    button:disabled { opacity: 0.5; }
    .headers{text-align: left;}
    .exercise-preview { background: white; border-radius: 12px; overflow: hidden; }
    .preview-header { display: flex; justify-content: space-between; align-items: center;border-bottom: 1px solid #eaeef2; }
    .preview-title { font-size: 18px; font-weight: 600; color: #1f2f3d; }
    .question-header{display: flex;gap: 5px;align-items: center;margin-bottom: 10px;}
    .knowledge-point { padding: 10px; border-bottom: 1px solid #eaeef2; color: #606266; text-align: left; }
    .knowledge-label { font-weight: 500; margin-right: 8px; color: #303133; }
    .question-container { padding: 20px; }
    .question-type { display: inline-block; padding: 4px 15px 4px 15px; background: #1465E1; color: white; border-radius: 50px; font-size: 12px; font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .question-text { font-size: 14px; color: #303133; font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .options-list { display: grid; gap: 12px; }
    .option-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f5f7fa; border-radius: 8px; border: 1px solid #eaeef2; }
    .option-letter { font-weight: 500; margin-right: 12px; color: #606266; font-family: 微软雅黑, Microsoft YaHei, SimSun;  }
    .option-text { color: #303133; }
    .radio-button { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #dcdfe6; position: relative; margin-left: 10px; }
    .selected .radio-button { border-color: #1465E1; background: #1465E1; }
    .selected .radio-button::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: white; }
    .answer-section { padding: 20px; background: #f9fafc; border-top: 1px solid #eaeef2; }
    .correct-answer { color: #1465E1; font-weight: 500; margin-bottom: 12px;text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .analysis-text { color: #606266; text-align: left;font-family: 微软雅黑, Microsoft YaHei, SimSun; }
    .material-management { background: white; border-radius: 8px; padding-bottom: 20px; }
    .nav-path { color: #000; font-size: 14px; font-family: 微软雅黑, Microsoft YaHei, SimSun; text-align: left;display: flex;align-items: center;padding: 10px 15px 10px 0;justify-content: space-between; }
    .nav-path .titles{display: flex;flex-direction: row;align-items: center;}
    .nav-path .titles .left{height: 15px;width: 5px;background: #0457D5;border-radius: 5px;margin-left: 15px;}
    .nav-path span { margin: 0 5px; font-family: 微软雅黑, Microsoft YaHei, SimSun; font-weight: 600; }
    .question-box{box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15); border-radius: 20px;width: calc(100% - 50px);margin: 0  auto;padding: 20px 10px 20px 10px;}
    .action-buttons { display: flex; justify-content: space-between; padding: 10px 15px 20px 15px; border-bottom: 1px solid #eaeef2; }
    .left-buttons { display: flex; gap: 12px; height: 28px; }
    .left-buttons button{background: #1465E1;}
    .left-buttons img{width: 18px;}
    .left-buttons span{margin-left: 5px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;}
    .right-buttons { display: flex; gap: 12px; }
    .btn { border-radius: 4px; border: none; cursor: pointer; font-size: 14px; display: flex; align-items: center; transition: all 0.3s; }
    .btn-primary { background: #409eff; color: white; }
    .btn-primary:hover { background: #66b1ff; }
    .btn-default { height: 25px; color: #D49C1F; background: #fff; border: 1px solid #D49C1F; font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px; padding: 0 20px 0 20px; }
    .btn-default:hover { background: #D49C1F;color: #fff; } 
    .btn-danger { border: 1px solid #D4424A; color: #D4424A; height: 28px; background: #fff;}
    .btn-danger:hover { background: #D4424A;color: #fff; } 
    .search-box{display: flex;flex-direction: row;gap: 10px;padding: 10px 0 20px 15px;}
    .material-table { width: 100%; border-collapse: collapse; }
    .material-table th, .material-table td { padding: 16px; text-align: left; border-bottom: 1px solid #eaeef2; }
    .material-table th { background-color: #f5f7fa; color: #606266; font-weight: 500; }
    .table-header { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; background-color: #f5f7fa; height: 50px; }
    .table-checkbox { width: 40px; display: flex; justify-content: center; }
    .material-name { flex: 1; } 
    .material-operations { display: flex; justify-content: end; gap: 12px; }
    .table-row { display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #eaeef2; height: 60px; }
    .table-row:hover { background-color: #f5f7fa; }
    .operation-btn { padding: 6px 12px; border-radius: 4px; font-size: 13px; cursor: pointer; }
    .operation-preview { color: #409eff; border: 1px solid #409eff; background: white; }
    .operation-preview:hover { color: white; background: #409eff; }
    .operation-delete { color: #D4424A; border: 1px solid #D4424A; background: white; }
    .operation-delete:hover { color: white; background: #D4424A; }
    .add-point{justify-content: space-between;}
    .add-point .leftdiv{display: flex;flex-direction: row;align-items: center;}
    .add-point .add-btn{display: flex;flex-direction: row;justify-content: center;align-items: center;padding: 5px 20px;background: #1465E1;color: #fff;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;border-radius: 20px;cursor: pointer;margin-right: 20px;}
    .add-form{ width: calc(100% - 30px);margin: 10px auto;display: flex;flex-direction: row; gap: 20px; }
    .form-item{flex: 1;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
    .form-item .items .text{font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 14px;min-width: 100px;}
    .add-form .items{display: flex;flex-direction: row;gap: 10px;align-items: center;padding-right: 10px;}
    .add-form .items .reds{ color: red; margin-top: 5px; }
    .add-form .inputs{ margin-top: 10px; }
    :deep(.el-input){width: 100%;}
    .tips{color: #999;}
</style>